import React from 'react';
import { SearchBar, WingBlank, WhiteSpace, List } from 'antd-mobile';
import { publicPath } from '../../common/js/global';

import Tag from '../../components/common/Tag';

import './index.sass';

class DuplicateChecking extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
  }
  autoFocusInst;
  componentDidMount() {
    if (__CLIENT__) this.autoFocusInst.focus();
  }

  render() {
    return (
      <div className="duplicate-checking-container">
        <SearchBar
          placeholder="请输入4个字以上进行查询"
          ref={ref => (this.autoFocusInst = ref)}
          showCancelButton
          cancelText="关闭"
          onCancel={() => {
            // this.props.history.push('features');
            this.props.history.goBack();
          }}
        />
        <WhiteSpace />
        <div className="bg">
          {' '}
          <WingBlank>搜索出{3}个客户</WingBlank>
        </div>
        <WhiteSpace />
        <Customer />
      </div>
    );
  }
}

class Customer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      cname, saleName, saleId, type, address, status
    } = this.props;
    return (
      <div className="bg customer">
        <List className="global-list">
          <List.Item extra={<Tag title="未签约" />}>杭州仙人掌</List.Item>
          <List.Item extra="张三（JY00365）丨上海">
            <span className="gray">跟进销售</span>
          </List.Item>
          <List.Item extra="B级">
            <span className="gray">客户跟进等级</span>
          </List.Item>
          <List.Item extra="杭州">
            <span className="gray">客户所在地</span>
          </List.Item>
          <List.Item extra="已报备">
            <span className="gray">异地报备状态</span>
          </List.Item>
        </List>
      </div>
    );
  }
}

export default DuplicateChecking;
